import { ConfigProvider, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useMemo, useRef } from 'react';
import './index.less'
import bgColorClass from '@/assets/ts/bg_color_class';





type Props<DataType> = {
  columns: ColumnsType<DataType>
  data: DataType[]
  animation?: boolean
  index?: boolean
  rowKey?: keyof DataType
  scroll?:{
    x:string | number | true,
    y:string|number
  }
}
const TableIndex = <T,>({ columns, data, animation = false, index = false, rowKey,scroll}: Props<T>) => {
  const tableRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {

    if (!animation) return

    const tableBody = tableRef.current?.querySelector('.ant-table-tbody-virtual-holder');



    if (tableBody) {
      const scrollInterval = setInterval(() => {

        tableBody.scrollTop += 0.5; // 每次向上滚动1px
        if (tableBody.scrollTop >= tableBody.scrollHeight - tableBody.clientHeight) {
          tableBody.scrollTop = 0; // 滚动到底部后回到顶部
        }
      }, 50); // 每30ms滚动一次

      return () => clearInterval(scrollInterval); // 组件卸载时清除定时器
    }
  }, []);

  const IndexData = useMemo(() => {
    if (!index) return []
    return [
      {
        title: '序列',
        dataIndex: 'index',
        width: 60,
        render: (_A: undefined, _R: T, _index: number) => {
          return <div className='w-full h-full flex items-center'>
            <div className='w-[22px] h-[22px] border-t-[1px] border-[rgba(255,255,255,0.60)] bg-[rgba(24,144,255,0.30)] flex justify-center items-center'>{_index + 1}</div>
          </div>
        }
      },
    ]

  }, [index])


  const getColumnsList = useMemo<ColumnsType<T>>(() => {

    return [
      ...IndexData,
      ...columns
    ]

  }, [columns, IndexData])

  return <div ref={tableRef} className='h-full'>
    <ConfigProvider
      theme={{
        components: {
          Table: {
            headerSplitColor: 'rgba(0,0,0,0)',
            headerBorderRadius: 0,
            headerBg: 'rgba(0,0,0,0)'
          },
        },
      }}
    >

      <Table
        rowKey={rowKey}
        columns={getColumnsList}
        dataSource={data}
        pagination={false}
        virtual
        rowHoverable={false}
        scroll={scroll}
        rowClassName={(_, index) => {
          return !(index % 2) ? bgColorClass.table_row_zore : bgColorClass.table_row_one
        }} />

    </ConfigProvider>
  </div>




}

export default TableIndex